<template>
<!-- 		<div class="Echarts">
			<div id="main" style="width: 600px; height: 400px;"></div>
		</div> -->
		
		
		
		<!-- 请假申请 -->
	<div>
		<el-button type="primary" @click="add_leave">
			请假申请
		</el-button>
		<el-dialog v-model="dialogVisible_leave" title="请假申请" width="50%">
			<el-form model="form_leave" label-width="120px">
				<el-form-item label="员工姓名">
				      <el-input v-model="form_leave.staffname" placehold er="请填写员工姓名" />
				</el-form-item>
		
				<el-form-item label="部门">
				    <el-select v-model="form_leave.department" placeholder="请选择部门">
				        <el-option label="人力部" value="shanghai" />
				        <el-option label="财务部" value="beijing" />
						<el-option label="技术部" value="shanghai" />
						<el-option label="销售部" value="shanghai" />
				    </el-select>
				</el-form-item>
				
				<el-form-item label="请假类型">
				    <el-select v-model="form_leave.typle" placeholder="请选择请假类型">
				        <el-option label="外地出差" value="shanghai" />
				        <el-option label="员工休假" value="beijing" />
						<el-option label="员工私事" value="shanghai" />
				    </el-select>
				</el-form-item>
				
				
				<el-form-item label="开始日期">
				    <el-col :span="11">
				        <el-date-picker v-model="form_leave.startdate" type="date" placeholder="请选择开始日期" style="width: 100%"/>
				    </el-col>
				</el-form-item>
				
				<el-form-item label="结束日期">
				    <el-col :span="11">
				        <el-date-picker v-model="form_leave.enddate" type="date" placeholder="请选择结束日期" style="width: 100%"/>
				    </el-col>
				</el-form-item>
				
				<el-form-item label="请假事由">
				      <el-input type="textarea" v-model="form_leave.reson" placeholder="请说明原因" />
				</el-form-item>
				
			</el-form>
		    <template #footer>
		      <span class="dialog-footer">
		        <el-button @click="dialogVisible_leave = false">取消</el-button>
		        <el-button type="primary" @click="save">提交</el-button>
		      </span>
		    </template>
		  </el-dialog>
	</div>	
		
		
		
		
	
		<!-- 补签说明 -->
	<div>
		<el-button type="primary" @click="add_ab">
			补签说明
		</el-button>
		<el-dialog v-model="dialogVisible_ab" title="缺勤说明" width="50%">
			<el-form model="form_ab" label-width="120px">
				<el-form-item label="用户名">
				      <el-input v-model="form_ab.staffname" placehold er="请填写员工姓名" />
				</el-form-item>

				<el-form-item label="部门">
				    <el-select v-model="form_ab.region" placeholder="请选择部门">
				        <el-option label="人力部" value="shanghai" />
				        <el-option label="财务部" value="beijing" />
						<el-option label="技术部" value="shanghai" />
						<el-option label="销售部" value="shanghai" />
				    </el-select>
				</el-form-item>
				
				<el-form-item label="日期">
				    <el-col :span="11">
				        <el-date-picker v-model="form_ab.date" type="date" placeholder="请选择日期" style="width: 100%"/>
				    </el-col>
				</el-form-item>
				
				<el-form-item label="缺勤说明">
				      <el-input type="textarea" v-model="form_ab.reson" placeholder="请说明原因" />
				</el-form-item>
				
			</el-form>
		    <template #footer>
		      <span class="dialog-footer">
		        <el-button @click="dialogVisible_ab = false">取消</el-button>
		        <el-button type="primary" @click="save">提交</el-button>
		      </span>
		    </template>
		</el-dialog>
	</div>
</template>



<script>	
// import request from "@/utils/requset";	

// echarts数据可视化

// import echarts from 'echarts'
	
// export default{
// 	name:'AboutView',
// 	data(){
// 		return {}
// 	},
// 	mounted:function(){
// 		this.$nextTick(function(){
// 			this.getPie()
// 		})
// 	},
// 	methods:{
// 		getPie(){
// 			var myChart=echarts.init(document.getElementById('main'))
// 			var option = {
// 			  title: {
// 			    text: 'Referer of a Website',
// 			    subtext: 'Fake Data',
// 			    left: 'center'
// 			  },
// 			  tooltip: {
// 			    trigger: 'item'
// 			  },
// 			  legend: {
// 			    orient: 'vertical',
// 			    left: 'left'
// 			  },
// 			  series: [
// 			    {
// 			      name: 'Access From',
// 			      type: 'pie',
// 			      radius: '50%',
// 			      data: [
// 			        { value: 1048, name: 'Search Engine' },
// 			        { value: 735, name: 'Direct' },
// 			        { value: 580, name: 'Email' },
// 			        { value: 484, name: 'Union Ads' },
// 			        { value: 300, name: 'Video Ads' }
// 			      ],
// 			      emphasis: {
// 			        itemStyle: {
// 			          shadowBlur: 10,
// 			          shadowOffsetX: 0,
// 			          shadowColor: 'rgba(0, 0, 0, 0.5)'
// 			        }
// 			      }
// 			    }
// 			  ]
// 			};
			
// 			myChart.setOption(option);
// 		}
// 	}
	
// }
export default{
	name:'AboutView',
	components: {
	  // HelloWorld
	},
	data(){
		return {
			form_ab:{},
			form_leave:{},
			dialogVisible_ab:false,
			dialogVisible_leave:false
		}
	},
	methods:{
		add_ab(){
			this.dialogVisible_ab=true
			this.form_ab={}
		},
		add_leave(){
			this.dialogVisible_leave=true
			this.form_leave={}
		},
		// save(){
		// 	request.post("/api/user",this.form).then(res=>{
		// 		console.log(res)
		// 	})
		// }
	}
	
}


</script>